<template>
  <view class="content">
    <uni-nav-bar 
      title="微信API完整示例" 
      left-icon="back" 
      @clickLeft="handleBack"
      fixed 
      placeholder>
    </uni-nav-bar>
    
    <view class="container">
      <!-- 用户授权 -->
      <uni-section title="用户授权" type="line">
        <view class="section-content">
          <button type="primary" size="mini" @click="handleGetUserProfile">获取用户信息</button>
          <button type="primary" size="mini" @click="handleLogin">微信登录</button>
          <button type="primary" size="mini" @click="handleCheckSession">检查登录状态</button>
        </view>
      </uni-section>
      
      <!-- 存储操作 -->
      <uni-section title="存储操作" type="line">
        <view class="section-content">
          <view class="input-group">
            <input v-model="storageKey" placeholder="键名" class="input" />
            <input v-model="storageValue" placeholder="值" class="input" />
          </view>
          <view class="button-group">
            <button type="primary" size="mini" @click="handleSetStorage">设置</button>
            <button type="primary" size="mini" @click="handleGetStorage">获取</button>
            <button type="warn" size="mini" @click="handleRemoveStorage">删除</button>
          </view>
        </view>
      </uni-section>
      
      <!-- 界面交互 -->
      <uni-section title="界面交互" type="line">
        <view class="section-content">
          <button type="primary" size="mini" @click="handleShowToast">显示Toast</button>
          <button type="primary" size="mini" @click="handleShowLoading">显示Loading</button>
          <button type="primary" size="mini" @click="handleShowModal">显示模态框</button>
          <button type="primary" size="mini" @click="handleShowActionSheet">显示操作菜单</button>
        </view>
      </uni-section>
      
      <!-- 设备信息 -->
      <uni-section title="设备信息" type="line">
        <view class="section-content">
          <button type="primary" size="mini" @click="handleGetSystemInfo">获取系统信息</button>
          <button type="primary" size="mini" @click="handleGetDeviceInfo">获取设备信息</button>
          <button type="primary" size="mini" @click="handleGetClipboard">获取剪贴板</button>
        </view>
      </uni-section>
      
      <!-- 文件操作 -->
      <uni-section title="文件操作" type="line">
        <view class="section-content">
          <button type="primary" size="mini" @click="handleChooseImage">选择图片</button>
        </view>
      </uni-section>
      
      <!-- 位置信息 -->
      <uni-section title="位置信息" type="line">
        <view class="section-content">
          <button type="primary" size="mini" @click="handleGetLocation">获取当前位置</button>
        </view>
      </uni-section>
      
      <!-- 支付功能 -->
      <uni-section title="支付功能" type="line">
        <view class="section-content">
          <button type="primary" size="mini" @click="handleRequestPayment">发起支付</button>
        </view>
      </uni-section>
      
      <!-- 分享功能 -->
      <uni-section title="分享功能" type="line">
        <view class="section-content">
          <button type="primary" size="mini" @click="handleShowShareMenu">显示分享菜单</button>
        </view>
      </uni-section>
      
      <!-- 结果展示 -->
      <uni-section title="结果展示" type="line">
        <view class="result-container">
          <scroll-view scroll-y class="result-scroll">
            <text class="result-text">{{ result }}</text>
          </scroll-view>
        </view>
      </uni-section>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 导入uni-ui组件
import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue'
import uniSection from '@dcloudio/uni-ui/lib/uni-section/uni-section.vue'

// 导入微信API封装
import { auth, storage, ui, device, file, location, payment, share } from '@/utils/wechat/index.js'

// 响应式数据
const storageKey = ref('')
const storageValue = ref('')
const result = ref('')

// 方法
const handleBack = () => {
  uni.navigateBack()
}

// 用户授权相关
const handleGetUserProfile = async () => {
  try {
    ui.showLoading('获取中...')
    const res = await auth.getUserProfile()
    result.value = JSON.stringify(res, null, 2)
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('获取用户信息失败')
    result.value = `错误: ${err.message}`
  }
}

const handleLogin = async () => {
  try {
    ui.showLoading('登录中...')
    const res = await auth.login()
    result.value = JSON.stringify(res, null, 2)
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('登录失败')
    result.value = `错误: ${err.message}`
  }
}

const handleCheckSession = async () => {
  try {
    ui.showLoading('检查中...')
    const isValid = await auth.checkSession()
    result.value = `登录状态: ${isValid ? '有效' : '已过期'}`
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('检查失败')
    result.value = `错误: ${err.message}`
  }
}

// 存储操作
const handleSetStorage = () => {
  if (!storageKey.value) {
    ui.showToast('请输入键名')
    return
  }
  
  const success = storage.set(storageKey.value, storageValue.value)
  if (success) {
    ui.showToast('设置成功')
    result.value = `已设置: ${storageKey.value} = ${storageValue.value}`
  } else {
    ui.showToast('设置失败')
    result.value = '存储设置失败'
  }
}

const handleGetStorage = () => {
  if (!storageKey.value) {
    ui.showToast('请输入键名')
    return
  }
  
  const value = storage.get(storageKey.value, '未找到')
  result.value = `获取值: ${value}`
}

const handleRemoveStorage = () => {
  if (!storageKey.value) {
    ui.showToast('请输入键名')
    return
  }
  
  const success = storage.remove(storageKey.value)
  if (success) {
    ui.showToast('删除成功')
    result.value = `已删除: ${storageKey.value}`
  } else {
    ui.showToast('删除失败')
    result.value = '存储删除失败'
  }
}

// 界面交互
const handleShowToast = () => {
  ui.showToast('这是一条Toast消息')
  result.value = '已显示Toast消息'
}

const handleShowLoading = () => {
  ui.showLoading('加载中...')
  setTimeout(() => {
    ui.hideLoading()
    result.value = 'Loading已隐藏'
  }, 2000)
}

const handleShowModal = async () => {
  try {
    const res = await ui.showModal('提示', '这是一个模态框示例')
    result.value = `用户点击: ${res.confirm ? '确定' : '取消'}`
  } catch (err) {
    result.value = `错误: ${err.message}`
  }
}

const handleShowActionSheet = async () => {
  try {
    const res = await ui.showActionSheet(['选项1', '选项2', '选项3', '取消'])
    result.value = `用户选择: 选项${res.tapIndex + 1}`
  } catch (err) {
    result.value = '用户取消选择'
  }
}

// 设备信息
const handleGetSystemInfo = async () => {
  try {
    ui.showLoading('获取中...')
    const res = await device.getSystemInfo()
    result.value = JSON.stringify(res, null, 2)
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('获取失败')
    result.value = `错误: ${err.message}`
  }
}

const handleGetDeviceInfo = async () => {
  try {
    ui.showLoading('获取中...')
    const res = await device.getDeviceInfo()
    result.value = JSON.stringify(res, null, 2)
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('获取失败')
    result.value = `错误: ${err.message}`
  }
}

const handleGetClipboard = async () => {
  try {
    ui.showLoading('获取中...')
    const res = await device.getClipboardData()
    result.value = `剪贴板内容: ${res}`
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('获取失败')
    result.value = `错误: ${err.message}`
  }
}

// 文件操作
const handleChooseImage = async () => {
  try {
    ui.showLoading('选择中...')
    const res = await file.chooseImage({ count: 1 })
    result.value = `已选择 ${res.tempFiles.length} 张图片`
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('选择失败')
    result.value = `错误: ${err.message}`
  }
}

// 位置信息
const handleGetLocation = async () => {
  try {
    ui.showLoading('定位中...')
    const res = await location.getLocation()
    result.value = JSON.stringify(res, null, 2)
    ui.hideLoading()
  } catch (err) {
    ui.hideLoading()
    ui.showToast('定位失败')
    result.value = `错误: ${err.message}`
  }
}

// 支付功能
const handleRequestPayment = () => {
  ui.showToast('支付功能需要真实订单信息')
  result.value = '支付功能需要后端生成订单信息'
}

// 分享功能
const handleShowShareMenu = () => {
  share.showShareMenu()
  ui.showToast('已显示分享菜单')
  result.value = '已显示分享菜单'
}
</script>

<style scoped>
.content {
  padding: 20rpx;
}

.container {
  padding-top: var(--status-bar-height);
}

.section-content {
  padding: 20rpx;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 20rpx;
}

.input {
  border: 1rpx solid #ddd;
  padding: 20rpx;
  border-radius: 10rpx;
}

.button-group {
  display: flex;
  gap: 20rpx;
  flex-wrap: wrap;
}

.button-group button {
  margin: 0;
}

.result-container {
  padding: 20rpx;
  height: 300rpx;
}

.result-scroll {
  height: 100%;
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 10rpx;
}

.result-text {
  font-size: 24rpx;
  line-height: 1.5;
  color: #333;
}
</style>
